<template>
  <vab-dialog v-model="isShowDialog" :close-on-click-modal="true" show-fullscreen width="90%">
    <template #default>
      <el-row class="posirow" :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover">
            <div class="table-box">
              <KingTable ref="leftKingTable" :tableOptions="_leftTableOptions">
                <!-- 表格 header 按钮 -->
                <template #tableHeader="scope">
                  <el-button
                    v-permissions="{ permission: ['bindRole:UserList'] }"
                    type="success"
                    :disabled="!scope.isSelected"
                    @click="handleAuth(scope.selectedListIds)"
                  >
                    授权角色
                  </el-button>
                </template>
                <!-- 表格操作 -->
                <template #operation="scope">
                  <el-button size="small" type="primary" @click="handleAuth([scope.row.id])"> 选入 </el-button>
                </template>
              </KingTable>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <div class="table-box">
              <KingTable ref="rightKingTable" :tableOptions="_rightTableOptions">
                <!-- 表格 header 按钮 -->
                <template #tableHeader="scope">
                  <el-button
                    v-permissions="{ permission: ['bindRole:UserList'] }"
                    type="danger"
                    :disabled="!scope.isSelected"
                    @click="cancelAuth(scope.selectedListIds)"
                  >
                    取消授权
                  </el-button>
                </template>
                <!-- 表格操作 -->
                <template #operation="scope">
                  <el-button size="small" type="danger" @click="cancelAuth([scope.row.id])"> 移除 </el-button>
                </template>
              </KingTable>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </template>
    <template #footer> </template>
  </vab-dialog>
</template>

<script setup lang="tsx" name="UserBind">
import VabDialog from "@/plugins/VabDialog/index.vue";
import { ref, reactive } from "vue";
import KingTable from "@/components/KingTable/index.vue";
import { postRequest } from "@/api/mains";
import { succMsg, failMsg, confirm } from "@/utils/MessageUtils";

const isShowDialog = ref(false);
const curUserId = ref("");

// 获取 KingTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const leftKingTable = ref();
const rightKingTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 KingTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const _leftInitParam = reactive({ userId: "", EQ_ss: 1, sorts: "mts@desc" });
const _rightInitParam = reactive({ userId: "", EQ_ss: 1, sorts: "mts@desc" });

// 表格配置项
const _leftTableCols = [
  { type: "selection", fixed: "left", align: "center", width: 60 },
  { type: "index", label: "序号", align: "center", width: 60 },
  {
    prop: "roleKey",
    label: "角色编码",
    width: 120
  },
  {
    prop: "roleName",
    label: "角色名称",
    overflow: true
  },
  { prop: "operation", label: "操作", fixed: "right", width: 130 }
];

// 表格配置项
const _rightTableCols = [
  { type: "selection", fixed: "left", align: "center", width: 60 },
  { type: "index", label: "序号", align: "center", width: 60 },
  {
    prop: "roleKey",
    label: "角色编码",
    width: 120
  },
  {
    prop: "roleName",
    label: "角色名称",
    overflow: true
  },
  { prop: "operation", label: "操作", fixed: "right", width: 130 }
];

//搜索栏配置
const _leftSearchCols = [
  {
    prop: "roleKey",
    label: "角色编码",
    width: 100,
    el: "input",
    showLabel: false
  },
  {
    prop: "roleName",
    label: "角色名称",
    width: 100,
    el: "input",
    showLabel: false
  }
];

//搜索栏配置
const _rightSearchCols = [
  {
    prop: "roleKey",
    label: "角色编码",
    width: 100,
    el: "input",
    showLabel: false
  },
  {
    prop: "roleName",
    label: "角色名称",
    width: 100,
    el: "input",
    showLabel: false
  }
];

const _leftTableOptions = {
  title: "用户管理",
  showReset: false,
  queryUrl: "system/user/unSelectRoles",
  operUrl: "system/user",
  tableColumns: _leftTableCols,
  searchColumns: _leftSearchCols,
  initParam: _leftInitParam
};

const _rightTableOptions = {
  title: "用户管理",
  showReset: false,
  queryUrl: "system/user/inSelectRoles",
  operUrl: "system/user",
  tableColumns: _rightTableCols,
  searchColumns: _rightSearchCols,
  initParam: _rightInitParam
};

// 重新拉取表格数据
const fetchLeftTableData = () => {
  leftKingTable.value?.getTableList();
};

const fetchRightTableData = () => {
  rightKingTable.value?.getTableList();
};

//显示
const showDialog = (row: any) => {
  isShowDialog.value = true;
  _leftInitParam.userId = row.id;
  _rightInitParam.userId = row.id;
  curUserId.value = row.id;
  fetchLeftTableData();
  fetchRightTableData();
};

//取消关联用户
const cancelAuth = (pks: string[]) => {
  if (pks.length > 0) {
    confirm("你确定要取消这些角色的权限吗", async () => {
      const { code, msg } = await postRequest("system/user/cancelRoles", {
        userId: curUserId.value,
        roleIds: pks
      });
      if (code == 200) {
        succMsg(msg);
        fetchLeftTableData();
        fetchRightTableData();
      }
    });
  } else {
    failMsg("未选中任何行");
  }
};

//关联用户
const handleAuth = (pks: string[]) => {
  if (pks.length > 0) {
    confirm("你确定要授权这些角色的权限吗", async () => {
      const { code, msg } = await postRequest("system/user/selectRoles", {
        userId: curUserId.value,
        roleIds: pks
      });
      if (code == 200) {
        succMsg(msg);
        fetchLeftTableData();
        fetchRightTableData();
      }
    });
  } else {
    failMsg("未选中任何行");
  }
};

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
  showDialog
});
</script>
<style lang="scss" scoped>
:deep(.el-card__body) {
  padding: 0;
}
:deep(.el-dialog__body) {
  padding-top: 5px;
  padding-bottom: 0;
}
:deep(.el-dialog__footer) {
  padding-top: 0;
  padding-bottom: 20px;
}
</style>
